<template>
	<div class="w-page w-newsList">
		<Header navNum="3" @isSearch='isSearch'></Header>
		<div class="conbox" v-if="!isSearchList">
			<div class="w-width">
				<div class="w-cardbox">
					<div class="w-card flex hs vs">
						<Leftcard class="w-card-left shrink0" :isBackHome="isBackHome" :deAcBig='acBig' :menuList="menuList" :columnName="columnName" @aa="out"></Leftcard>
						<div class="tabCon">
							<div class="w-tabtop flex hs vc">
								<img src="../assets/img/index/home.png" alt="" class="w-home">
								<el-breadcrumb separator-class="el-icon-arrow-right">
									<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
									<el-breadcrumb-item :to="{}"><span @click="acBig = '0'; isBackHome = true">{{ columnName }}</span></el-breadcrumb-item>
									<el-breadcrumb-item :to="{}"><span @click="isdetail = 0">{{ title }}</span></el-breadcrumb-item>
									<el-breadcrumb-item v-if="isdetail == 1">详情</el-breadcrumb-item>
								</el-breadcrumb>
							</div>
							<div class="w-mainhtml" v-if="isdetail == 0">
								<div class="w-tabtitle">{{ title }}</div>
								<div v-if="List.length > 0">
									<div class="w-con">
                    <div class="w-commonList">
                      <ul class="w-tabul">
                        <li v-for="(v,i) in List" :key="i" @click="getDetail(v.id)">
                          <div class="w-a flex hs vc">
                            <p class="dian shrink0"></p>
                            <span class="w-sign-top" v-if="v.top">置顶</span>
                            <p class="w-text ellipsis">
                              <span>{{ v.con }}</span>
                            </p>
                          </div>
                          <div class="w-time">
                            <span>{{ v.createTime.split(' ')[0] }}</span>
                          </div>
                        </li>
                      </ul>
                    </div>
<!--										<CommonList :List="List" @sendId='sendId'></CommonList>-->
										<el-pagination @current-change="handleCurrentChange" :current-page.sync="page" :page-size="size" layout="total, prev, pager, next"
										 :total="total">
										</el-pagination>
									</div>
								</div>
								<div v-else>
									<div class="w-con">暂无</div>
								</div>
							</div>
							<div class="w-detail" v-if="isdetail == 1">
								<detailPage :info='info'></detailPage>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import detailPage from "./common/detail"
	import {
		articleClassList,
		articleDetail
	} from '@/api/article'
	export default {
		components: {
			"detailPage": detailPage
		},
		data() {
			return {
				columnName: '新闻中心',
				acBig: '',
				title: '',
				menuList: [{
						id: 1,
						name: '新闻动态',
						apiId: 9,
					},
					{
						id: 2,
						name: '通知公告',
						apiId: 18,
					}
				],
				// 列表
				List: [],
				size: 10,
				page: 1,
				total: 0,
				classId: 0,
				// 详情
				isdetail: 0,
				info: {},
				deAcBig: "0",
				isFirst:true,
				isSearchList: false,
        isBackHome: false // 是否返回home
			};
		},
		created() {
		  console.log(this.$route.query)
			this.isSearch()
			this.out();
			this.sendId()
			this.classId = this.menuList[0].apiId
			if(this.$route.query.deAcBig && this.isFirst==true){
				this.isFirst = false
				this.acBig = this.$route.query.deAcBig.toString()
				this.deAcBig = this.$route.query.deAcBig.toString()
        this.changeMenu()
			}
		},

    watch: {
      $route () {
        this.acBig = this.$route.query.deAcBig
        this.out(JSON.stringify({
          acBig: this.acBig,
          acSml: ''
        }))

        this.changeMenu()
      }
    },

		mounted() {
			// if(this.$route.query.detailId){
			// 	this.getDetail(this.$route.query.detailId)
			// }
		},
		methods: {
			isSearch(data){
				console.log(data)
				this.isSearchList=data
			},
			getList() {
				articleClassList({
					classId: this.classId,
					size: this.size,
					page: this.page,
				}).then(response => {
					this.List = response.data.list
					this.total = response.data.total
					this.List.forEach(v => {
						v.con = v.title
					})
				})
			},
			out(data) {
        var _this = this;
        if (data) {
					_this.page = 1
					_this.isdetail = 0
          var cacheData = JSON.parse(data)
          _this.acBig = cacheData.acBig.toString()

          _this.$router.replace({
            path: '/newsList',
            query: {
              deAcBig: parseInt(_this.acBig)
            }
          }).catch(err => {})
				}
        this.isBackHome = false
			},

      changeMenu() {
        let _this = this

        _this.menuList.forEach(item => {
          if (parseInt(item.id) === parseInt(_this.acBig)) {
            _this.title = item.name

            _this.classId = item.apiId
          }
        });
        _this.getList()
      },

			// 分页
			handleCurrentChange(currentPage) {
				this.page = currentPage;
				this.getList()
			},
			// 详情页面数据接收
			sendId(data) {
				if (data) {
					this.getDetail(data)
				}
			},
			getDetail(id){
			  this.info = {}
				this.isdetail = 1

				articleDetail({
					id: id,
				}).then(response => {
				  console.log(response)
					this.info = response.data
          this.info.className = 'author_box'
				})
			}
		},
	};
</script>

<style scoped>
  .w-sign-top {
    font-size: 12px;
    line-height: 25px;
    color: #ffffff;
    font-weight: 300;
    padding: 5px 10px;
    background: #CFA972;
    border-radius: 5px;
    margin-right: 10px;
  }
</style>

<style scoped>
  /* li */
  .w-tabul {
    margin-bottom: 30px;
    box-sizing: border-box;
    min-height: 24.5vh;
  }

  .w-tabul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1PX dotted #999;
    cursor: pointer;
  }

  .w-tabul .w-time {
    font-size: 16px;
    color: #333333;
  }

  .w-tabul .w-a {
    width: 75%;
    font-size: 16px;
    color: #333333;
    padding: 18px 0 18px 9px;
    box-sizing: border-box;
  }

  .w-tabul .dian {
    width: 6px;
    height: 6px;
    background: rgba(102, 102, 102, 1);
    border-radius: 50%;
    margin-right: 13px;
  }

  .w-text {
    width: calc(90% - 70px);
  }
</style>

<style scoped>
	/* 公共css */
	.w-card {
		background: #fff;
	}
	.w-card-left {
		width: 26%;
	}
	/* 右侧 */
	.w-home {
		width: 16px;
		display: block;
		height: 14px;
		margin-right: 15px;
	}

	.tabCon {
		padding: 35px 33px;
		box-sizing: border-box;
		width: 74%;
	}

	.w-tabtitle {
		margin-top: 39px;
		margin-bottom: 47px;
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		font-weight: 500;
	}

	.w-width {
		width: 70%;
		padding-top: 15px;
		margin: 0 auto;
	}

	.conbox {
		background: linear-gradient(#C9B99F, #fff);
		padding-bottom: 30px;
	}
</style>
<style>
	.w-newsList .el-tabs--left .el-tabs__header.is-left {
		width: 26%;
	}

	.w-newsList .el-tabs--left .el-tabs__item.is-left {
		text-align: center;
		color: #333;
		font-size: 18px;
	}

	.w-newsList .el-pager li {
		border: 1PX solid #9C9A9B;
		margin: 0 7px;
		font-size: 14px;
		font-weight: 300;
		border-radius: 3px;
	}

	.w-newsList .el-pager li.active+li {
		border: 1PX solid #9C9A9B;
	}

	.w-newsList .el-pager li.active {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-newsList .el-pager li:hover {
		background: #791C1C;
		color: #fff;
		border: 1px solid #791C1C;
	}

	.w-newsList .el-pagination {
		text-align: center;
	}
</style>
